<template>
	<view>
		<view class="header">
			<view class="contnet1">
				<view class="" v-for="i in 10" :key="i">这才是中粗</view>
			</view>
			<view class="contnet2">
				<view class="" v-for="i in 10" :key="i">这才是中粗</view>
			</view>
			<view class="contnet3">
				<view class="" v-for="i in 10" :key="i">这才是中粗</view>
			</view>
		</view>
		<view class="">
			<!-- <van-tabs  :active="active" @change="onChange"> -->
			  <!-- <van-tab title="全部"> -->
				  <view class="contentlist" v-for="i in lists" :key="i">
					  <view class="title">#&nbsp;{{i.title}}</view>
					  <!-- <view class="dongtai">123条动态</view> -->
					  <view class="content">
						  <view class="left">
							  <view class="name" @click="handledToDetail(i.threadId)">{{i.content.text}}</view>
							  <view class="mingchen">
								  <view class="">{{i.user.nickname}}</view>
								  <view class="">{{i.diffTime}}</view>
							  </view>
						  </view>
						  <view class="right">
							  <image src="" mode=""></image>
						  </view>
					  </view>
				  </view>
			  <!-- </van-tab> -->
			  
			<!--  <van-tab title="肥料指南">内容 2</van-tab>
			  <van-tab title="土壤选择">内容 3</van-tab>
			  <van-tab title="果蔬培育">内容 4</van-tab>
			</van-tabs> -->
		</view>
	</view>
</template>

<script>
	// import {getTopic} from '@/api/circle.js'
	import {getTopicList} from '@/api/circle.js'
	export default {
		data() {
			return {
				 active: 0,
				 lists:[]
			}
		},
		onLoad() {
			this.getTopicList()
		},
		methods: {
			 onChange(event) {
				console.log(event)
			  },
			  
			  getTopicList() {
			  	let data =
			  		`page=${1}&perPage=${200}&filter[categoryids][0]=${6}&filter[categoryids][1]=${3}&filter[categoryids][2]=${4}&filter[categoryids][3]=${5}filter[essence]0=${0}&filter[attention]=${0}&filter[sort]=${1}&scope=${0}&dzqSid=${74874316-1664446553074}&dzqPf=${'h5'}&`;
			  	getTopicList(data).then(res => {
			  		console.log(res)
			  		this.lists = res.data.Data.pageData
			  	})
			  },
			  handledToDetail(i){
			  	console.log(i)
			  	uni.navigateTo({
			  		url: '/page_forum/articledetail/articledetail?id=' +i
			  	})
			  },
		}
	}
</script>

<style lang="scss">
	@keyframes move1{
	       0% {
	           transform: translate(0,0);
	       }
	       100% {
			   transform: translate(-120%,0);
	       }
	   }
	@keyframes move2{
	       0% {
	           transform: translate(0,0);
	       }
	       100% {
			   transform: translate(-140%,0);
	       }
	   }
	@keyframes move3{
	       0% {
	           transform: translate(0,0);
	       }
	       100% {
			   transform: translate(-160%,0);
	       }
	   }
.header {
	background-color: #000000;
	height: 252rpx;
	// padding: 50rpx 28rpx;
	box-sizing: border-box;
	position: relative;
	.contnet1 {
		padding: 20rpx 0 0 0;
		position: absolute;
		top: 0;
		right: -50%;
		display: flex;
		animation: move1 20s linear infinite;
		white-space: nowrap;
		color: #fff;
		view {
			margin: 0 20rpx;
			background-color: #262626;
			border-radius: 50px;
			padding: 10rpx 20rpx;
			font-size: 26rpx;
			// animation: move 5s;
		}
	}
	.contnet2 {
		position: absolute;
		top: 100rpx;
		right: -10%;
		display: flex;
		animation: move1 30s linear infinite;
		white-space: nowrap;
		color: #fff;
		view {
			margin: 0 20rpx;
			background-color: #262626;
			border-radius: 50px;
			padding: 10rpx 20rpx;
			font-size: 26rpx;
			// animation: move 5s;
		}
	}
	.contnet3 {
		position: absolute;
		top: 180rpx;
		right: -20%;
		display: flex;
		animation: move1 40s linear infinite;
		white-space: nowrap;
		color: #fff;
		view {
			margin: 0 20rpx;
			background-color: #262626;
			border-radius: 50px;
			padding: 10rpx 20rpx;
			font-size: 26rpx;
			// animation: move 5s;
		}
	}
}
.content {
	display: flex;
	align-items: center;
	.left {
		image {
			width: 112rpx;
			height: 122rpx;
			border-radius: 6rpx;
			margin-right: 20rpx;
		}
	}
	.right {
		font-size: 20rpx;
		color: #fff;
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		>view:nth-child(1){
			margin-top: 40rpx;
		}
	}
}

	::v-deep .van-tabs__line {
		background-color: #43a66d !important;
	}
	.contentlist {
		padding: 20rpx 30rpx 10rpx;
		border-bottom:1px solid #eee;
		.dongtai {
			margin:20rpx 0 0;
			font-size: 24rpx;
			color: #ccc;
		}
		.content {
			display: flex;
			justify-content: space-between;
			.right {
				image {
					width: 140rpx;
					height: 140rpx;
					border-radius: 10rpx;
				}
			}
			.left {
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				width: 500rpx;
				.name {
					margin-bottom: 30rpx;
					font-size: 26rpx;
				}
				.mingchen {
					display: flex;
					font-size: 22rpx;
					color: #ccc;
					justify-content: space-between;
				}
			}
		}
	}
</style>
